﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>咸聊</title>
    <link href="js/layui/css/layui.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="css/login.css" />
    <script src="js/vue.min.js"></script>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/layui/layui.js"></script>
    <script src="js/jquery.signalR-2.2.2.min.js"></script>
</head>
<body>
    <!--<h2>没事，一起咸聊！</h2>-->
    <div class="container" id="container">
        <div class="form-container sign-up-container">
            <form action="#">
                <h1>注册</h1>
                <!--<div class="social-container">
                    <a href="#" class="social"><i class="fa fa-qq"></i></a>
                    <a href="#" class="social"><i class="fa fa-weixin"></i></a>
                    <a href="#" class="social"><i class="fa fa-weibo"></i></a>
                </div>
                <span>第三方账号注册</span>-->
                <input type="text" placeholder="名称" />
                <input type="text" placeholder="请输入您的个人账号" />
                <input type="password" placeholder="密码" />
                <button>注册</button>
            </form>
        </div>
        <div class="form-container sign-in-container">
            <form action="#">
                <h1>登录</h1>
                <!--<div class="social-container">
                    <a href="#" class="social"><i class="fa fa-qq"></i></a>
                    <a href="#" class="social"><i class="fa fa-weixin"></i></a>
                    <a href="#" class="social"><i class="fa fa-weibo"></i></a>
                </div>
                <span>第三方账号登录</span>-->
                <input type="text" v-model="txtNick" placeholder="请输入您的个人账号" />
                <input type="password" v-model="txtPwd" placeholder="请输入密码" />
                <!--<a href="javascript:;">忘记密码？</a>-->
                <button v-on:click="btnLogin()">登录</button>
            </form>
        </div>
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <h1>咸 聊！</h1>
                    <p>没什么事，咋们一块儿闲聊！</p>
                    <button class="ghost" id="signIn">登录</button>
                </div>
                <div class="overlay-panel overlay-right">
                    <h1>咸 聊！</h1>
                    <p>让我们一起，轻松、愉快的闲聊会儿！</p>
                    <button class="ghost" id="signUp">注册</button>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <p>
            咸聊，让我们一起，轻松、愉快的闲聊！
        </p>
    </footer>
</body>
</html>
<script>
    var layer;
    layui.config({ base: '/js/layui/lay/modules/' }).use(['layer', 'jquery'], function () {
        layer = layui.layer, jquery = layui.jquery;

        $(function () {
            $("#signUp").click(function () {
                if (!$("#container").hasClass("right-panel-active")) $("#container").addClass("right-panel-active");
            });

            $("#signIn").click(function () {
                if ($("#container").hasClass("right-panel-active")) $("#container").removeClass("right-panel-active");
            });
        });
    });
    var vm = new Vue({
        el: '#container',
        data: {
            txtNick: '',
            txtPwd: '',
            proxy: []
        },
        created() {
            this.initdata();
        },
        methods: {
            initdata: function () {
                var conn = $.hubConnection("http://localhost:7123/signalr");
                var proxy = conn.createHubProxy("chatHub");
                this.proxy = proxy;
                //success
                this.proxy.on('showJoinMessage', uid => {
                    if (uid != "") {
                        window.location.href = 'index.html?userid=' + uid;
                    }
                });
                //error
                this.proxy.on('errorMessage', _res => {
                    if (_res != "") alert(_res);
                });
                conn.start().done(function () { }).fail(function () { console.log("Could not connect"); });
            },
            //登陆
            btnLogin: function () {
                if (this.txtNick == "" || this.txtNick == null) {
                    layer.msg("请输入您的个人账号"); return false;
                } else if (this.txtPwd == "" || this.txtPwd == null) {
                    layer.msg("请输入您的密码"); return false;
                } else {
                    this.proxy.invoke('addOnlineUser', this.txtNick, this.txtPwd);
                    //this.proxy.invoke('addOnlineUser', this.txtNick);
                }
            }
        }
    });
</script>